<template>
  <div>
    <!--全局头部-->
    <MainHeader/>

    <!--主体-->
    <div class="view-subject-div">
      <!--搜索框-->
      <div style="width: 70%;">
        <el-input v-model="search.searchInput" placeholder="支持医生姓名/科室/疾病名称"
                  @change="loadDocker"
                  clearable class="search-input">
        </el-input>
        <el-button class="search-input-button" icon="el-icon-search"
                   @click="loadDocker"/>
      </div>
      <!--一级筛选条件：科室，疾病，级别，排序-->
      <el-card class="search-type-card" body-style="padding: 10px">
        <!--搜索类型-->
        <div>
          <span class="search-type-text">筛选条件：</span>
          <el-radio-group v-model="search.searchType" size="medium"
                          @change="searchTypeChange">
            <el-radio-button label="全部"/>
            <el-radio-button label="科室"/>
            <el-radio-button label="疾病"/>
          </el-radio-group>
        </div>
        <!--级别-->
        <div>
          <span class="search-type-text">级别：</span>
          <el-radio-group v-model="search.positionId" size="medium"
                          @change="searchTypeChange">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button v-for="position in positionList"
                             :label="position.id">
              {{ position.pname }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <!--排序-->
        <div>
          <span class="search-type-text">排序：</span>
          <el-button type="text" @click="sortIconChange('null')">无</el-button>
          <el-button type="text" @click="sortIconChange('score')">
            评分<i :class="sortIcon.scoreIcon"/>
          </el-button>
          <el-button type="text" @click="sortIconChange('position')">
            医生职位<i :class="sortIcon.positionIcon"/>
          </el-button>
        </div>
      </el-card>
      <!--具体筛选条件-->
      <el-card v-if="search.searchType !== '全部'" class="search-card" body-style="padding: 0">
        <!--一级科室-->
        <div v-if="search.searchType === '科室'">
          <el-button v-for="pDepartment in departmentList"
                     v-if="pDepartment.pid === 0"
                     type="text"
                     @click="search.pDepartmentId = pDepartment.id">
            {{ pDepartment.name }}
          </el-button>
        </div>
        <!--疾病-->
        <div v-if="search.searchType === '疾病'">
          <el-radio-group v-model="search.diseaseFirst" size="small"
                          @change="loadDocker">
            <el-radio-button v-for="letter of AZ"
                             :label="letter" :value="letter"/>
          </el-radio-group>
        </div>
      </el-card>
      <!--二级科室卡片-->
      <el-card v-if="search.searchType === '科室'" class="search-card" body-style="padding: 0">
        <el-button v-for="department in departmentList"
                   v-if="department.pid === search.pDepartmentId"
                   type="text"
                   @click="search.departmentId = department.id; loadDocker()">
          {{ department.name }}
        </el-button>
      </el-card>

      <!--医生列表-->
      <div class="docker-list">
        <!--医生信息卡片-->
        <div class="docker-card-div" v-for="(docker, index) in dockerList" :key="index"
             @click="routerLink(docker.id,docker.positionId)">
          <div class="docker-card">
            <!--左-->
            <div class="docker-card-left">
              <!--头像-->
              <!--            <img :src="docker.img" alt="" class="square-image">-->
              <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" class="docker-img"/>
            </div>
            <!--右-->
            <div class="docker-card-right">
              <!--右上 一-->
              <div class="docker-card-right-up">
                <div>
                  <b style="width: 70px">医生姓名:</b>
                  <span v-html="docker.name"/>
                </div>
                <div>
                  <b style="width: 40px">性别:</b>
                  <span v-if="docker.sex === 0">男</span>
                  <span v-if="docker.sex === 1">女</span>
                </div>
              </div>
              <hr style="width: 100%"/><!--分割线-->
              <!--右上 二-->
              <div class="docker-card-right-up">
                <div>
                  <b style="width: 40px">科室:</b>
                  <span style="" v-html="docker.department.name"/>
                </div>
                <div>
                  <b style="width: 70px">医生职位:</b>
                  <span>{{ docker.position.pname }}</span>
                </div>
              </div>
              <hr style="width: 100%"/><!--分割线-->
              <!--右中-->
              <div class="docker-card-right-middle">
                <b style="width: 40px; white-space: nowrap;">擅长：</b>
                <span class="docker-card-right-middle-disease">
                  {{ docker.proficientIn }}
                </span>
              </div>

              <!--右下 评分-->
              <div class="docker-card-right-score">
                <el-rate v-if="docker.score !== -1"
                         v-model="docker.score"
                         disabled
                         show-score
                         text-color="#ff9900"
                         score-template="{value}">
                </el-rate>
                <span v-else>暂无评分</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--分页-->
      <el-pagination class="page-class" style="margin: 20px 0 0 0;"
                     background
                     layout="prev, pager, next, sizes, total"
                     :page-sizes="[20, 40, 60]"
                     :total="page.total"
                     @size-change="sizeChange"
                     @current-change="currentChange"/>
    </div>
  </div>
</template>

<script>
import SearchDockerJs from './SearchDocker'

export default SearchDockerJs
</script>

<style scoped>
@import "./SearchDocker.css";
@import "@/common/CommonCss.css";
</style>
